<template>
  <div class="box">
    <!-- 输入按钮按钮 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="标签名称" label-width="70px">
        <el-input v-model="Query.directoryName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="状态" label-width="75px">
        <el-select v-model="Query.state" placeholder="请选择" @click.native="condition">
          <el-option v-for="(item,index) in status" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button size="small" class="kong_button" @click="clear">清空</el-button>
      <el-button type="primary" size="small" class="button_body"
      @click="searchFnction"
        >搜索</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-edit"
        size="medium"
        class="xin_button"
        @click=" newEdit1('add')"
        >新增标签</el-button
      >
    </el-form>

    <!-- body -->
    <el-row class="bodybody">
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark el-icon-info tubiao">
          共{{renderData.counts}}条记录
        </div></el-col
      >
    </el-row>
    <!-- 表格 -->
    <el-table :data="list" style="width: 100%" class="table">
      <el-table-column
        prop="id"
        label="序号"
        width="180"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="subjectName"
        label="所属学科"
        width="180"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="tagName"
        label="标签名称"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="username"
        label="创建者"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="创建日期"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        header-align="center"
        align="center"
      >
         <template #default="{ row }">
            <span>{{ row.state ? '已启用' : '已禁用' }}</span>
          </template>
      </el-table-column>

         <el-table-column align="center" label="操作"  width="200px">
          <template #default="{ row }">
            <el-button size="mini" type="text" v-if="row.state" @click="qijin(row,'add')">禁用</el-button>
             <el-button size="mini" type="text" v-else @click="qijin(row,'emit')">启用</el-button>
            <el-button size="mini" type="text" @click="xiugai('emit',row)" :disabled="row.state? true:false">修改</el-button>
            <el-button size="mini" type="text" @click="del(row.id)" :disabled="row.state? true:false">删除</el-button>
          </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="foot">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="NumberPages.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="NumberPages.pagesize"
          layout=" prev, pager, next,sizes,jumper"
          :total="this.renderData.counts"
          background
        >
        </el-pagination>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog
  title="新增目录"
  :visible.sync="dialogVisible"
  width="28%"
  :before-close="handleClose"
     @close="closeDilog">
  <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="所属学科">
    <el-select v-model="Query.subjectID" placeholder="请选择">
      <el-option v-for="(item,index) in xvekeList.data"  :key="index" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="目录名称" >
    <el-input v-model="Query.tagName" placeholder="请输入目录名称" class="fromInput" ></el-input>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="qveding">确 定</el-button>
  </span>
</el-dialog>

  </div>
</template>

<script>
import { remove, list, disabled } from '@/api/hmmm/companys.js'
import { datas } from '@/api/hmmm/citys.js'
import { status } from '@/api/hmmm/constants.js'
import { list as liss, simple, remove as deel, changeState, add as addadd, update } from '@/api/hmmm/tags.js'

export default {
  name: 'Card',
  components: {

  },
  data () {
    return {
      form: {
        region: '',
        name: ''
      },
      // 弹窗表单
      formBase: {
        shortName: null,
        company: null,
        province: null,
        city: null,
        tags: null,
        remarks: null,
        isFamous: null
      },
      // 获取列表参
      NumberPages: {
        page: 1,
        pagesize: 10
      },
      // 请求列表参数
      renderList: [],
      // 渲染数据列表
      renderData: '',
      // 字段
      type: '',
      // 城市数据
      datas: datas,
      // 市区数据
      urbanArea: '',
      // 启用未启用状态
      status: '',
      // 点的那项
      id: '',
      dialogVisible: false,
      dialogFormVisible: false,
      rules: {},
      formInline: {
        tags: null,
        city: null,
        province: null,
        shortName: null,
        state: null
      },
      Query: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        tagName: null,
        state: null
      },
      list: [],
      dataList: null,
      xvekeList: ''
    }
  },
  methods: {
    // 新增编辑功能
    newEdit (add, id) {
      this.dialogFormVisible = true
      this.type = add
      this.id = id
      if (this.type === 'emit') {
        const data = this.renderList.find(item => item.id === this.id)
        this.formBase = {
          shortName: data.shortName,
          company: data.company,
          province: data.province,
          city: data.city,
          tags: data.tags,
          remarks: data.remarks,
          isFamous: data.isFamous
        }
      }
    },
    // 清空弹窗表单
    clearForm () {
      this.formBase.shortName = ''
      this.formBase.company = ''
      this.formBase.province = ''
      this.formBase.city = ''
      this.formBase.tags = ''
      this.formBase.remarks = ''
    },
    // 渲染函数
    async render () {
      const { data } = await list({ ...this.NumberPages, ...this.formInline })
      this.renderData = data
      this.renderList = data.items
    },
    // 删除功能
    async deleteButton (id) {
      // 渲染列表数据
      await remove({ id })
      await this.render()
      this.$message.success('删除成功')
    },
    // 城市input
    handleProvince () {
      this.urbanArea = this.datas.find(item => item.city === this.formInline.city)
      console.log(this.urbanArea)
    },
    // 启用未启用状态
    condition () {
      this.status = status
    },
    // 启用未启用状态修改
    async  modifiedState (id) {
      const data = this.renderList.find(item => item.id === id)
      await disabled({ id: id, state: data.state ? 0 : 1 })
      this.render()
    },
    async handleSizeChange (val) {
      //   console.log(`每页 ${val} 条`)
      this.Query.pagesize = val
      this.NumberPages.page = 1
      await this.xuanran()
    },
    async handleCurrentChange (val) {
      //   console.log(`当前页: ${val}`)
      this.Query.page = val
      await this.xuanran()
    },
    handleClose (done) {

    },
    // 渲染函数
    async xuanran () {
      const { data } = await liss(this.Query)
      console.log(data)
      this.list = data.items
      this.dataList = data
    },
    // 搜索功能
    async searchFnction () {
      this.xuanran()
    },
    // 清除功能
    clear () {
      this.Query = {
        page: 1,
        pagesize: 10,
        subjectID: null,
        tagName: null,
        state: null
      }
      this.xuanran()
    },
    // 新增编辑功能
    async newEdit1 (add, id) {
      const xvekeList = await simple(this.Query)
      this.xvekeList = xvekeList
      this.dialogVisible = true
      this.type = add
      this.id = id
    },
    // 修改
    async xiugai (add, id) {
      this.dialogVisible = true
      this.type = add
      this.id = id
      // await simple()
      this.Query.subjectID = this.id.subjectID
      this.Query.tagName = this.id.tagName
    },
    // 弹窗确定判断
    async qveding () {
      if (this.type === 'add') {
        await addadd(this.Query)
        this.xuanran()

        this.$message.success('添加成功')
        this.dialogVisible = false
        this.Query.subjectID = null
        this.Query.tagName = null
      }
      if (this.type === 'emit') {
        await update({ id: this.id.id, subjectID: this.Query.subjectID, tagName: this.Query.tagName })
        this.xuanran()
        this.dialogVisible = false
        this.$message.success('修改成功')
        this.Query.subjectID = null
        this.Query.tagName = null
      }
    },
    // 弹窗叉号
    closeDilog () {
      this.dialogVisible = false
    },
    // 删除功能
    async del (id) {
      await deel({ id })
      this.xuanran()
      this.$message.success('删除成功')
    },
    async qijin (row, dd) {
      if (dd === 'add') {
        await changeState({ id: row.id, state: 0 })
        this.xuanran()
      }
      if (dd === 'emit') {
        await changeState({ id: row.id, state: 1 })
        this.xuanran()
      }
    }
  },
  async created () {
    await this.xuanran()
    await this.render()
  }
}
</script>

<style scoped lang="less">
body {
  background-color: #f0f2f5;
  padding: 18px;
}
.box {
  margin: 20px;
  padding: 18px;
  background-color: #fff;
  .kong_button {
    margin-left: 20px;
  }
  .xin_button {
    float: right;
    margin-right: 20px;
    background-color: #67c23a;
    border: 0;
  }

  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .top {
    .input_top {
      width: 200px;
      height: 12px;
    }

    .button_rt {
      margin-left: 810px;
      background-color: #67c23a;
      border: 0px;
      font-size: 13px;
    }
  }
}
.bodybody {
  width: 100%;
  background-color: #f4f4f5;
  margin-top: 16px;
  line-height: 35px;
  height: 35px;
  border-radius: 5px;
  .tubiao {
    margin-left: 18px;
    // color: #909399;
    font-size: 13px;
  }
}
.table {
  font-size: 14px;
  margin-top: 20px;
  .table_left {
    background-color: #ecf5ff;
    color: #459eff;
    border: 0.5px solid #459eff;
  }

  .table_left:hover {
    background-color: #409eff;
    color: #fff;
  }
  .table_body {
    background-color: #fdf6ec;
    color: #e7a654;
    border: 0.5px solid #e7a654;
  }
  .table_body:hover {
    background-color: #e6a23c;
    color: #fff;
  }
  .table_rt {
    background-color: #fef0f0;
    color: #f66c96;
    border: 0.5px solid #f66c96;
  }
  .table_rt:hover {
    background-color: #f56c6c;
    color: #fff;
  }
   .table_body.qiyong {
    background-color:#f0f9eb;
    color: #6fc262;
    border: 0.5px solid #6fc262;
  }
  .table_body.qiyong:hover {
    background-color: #67c23a;
    color: #fff;
  }
}
.foot {
  height: 55px;
  background-color: #fff;
  .block {
    float: right;
    margin-right: 40px;
    margin-top: 20px;
  }
}
// 弹窗
.demo-ruleForm {
  .from_input {
    width: 380px;
    margin: 0 135px;
    margin-bottom: 22px;
  }
}
.inputput {
  display: flex;
  p {
    width: 115px;
  }
}
.fromInput {width: 220px;}
// .dialog-footer {
//   width: 30px;
// }
</style>
